<template>
    <div class="supplementaryAgreementPage">
        <CommonTitle titleName="租赁合同信息" class="m-t20"></CommonTitle>
        <el-card class="card-box" shadow="never">
            <div class="head">
                <h2>基本信息</h2>
            </div>
            <div class="info-box">
                <el-form>
                    <el-row>
                        <el-col  :span="6">
                            <el-form-item class="form-item-margin_bottom" label="项目名称:">
                                <span>{{detailsInfo.projectName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="合同名称:">
                                <span>{{detailsInfo.contractName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="合同编号:">
                                <span>{{detailsInfo.contractId}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="租赁用途:">
                                <span>{{detailsInfo.purpose}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="承租方(签约方)名称:">
                                <span>{{detailsInfo.customerNames}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="租赁周期:">
                                <span>{{detailsInfo.signStartTime+'-'+detailsInfo.signEndTime}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4.5">
                            <el-form-item class="form-item-margin_bottom" label="面积:">
                                <span>{{detailsInfo.leaseTotalArea}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="资产名称:">
                                <span>{{detailsInfo.assetsName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="资产地址:">
                                <span>{{detailsInfo.address || '暂无'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="房源明细:">
                                <span>{{detailsInfo.housingNames}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4.5">
                            <el-form-item class="form-item-margin_bottom" label="租赁面积:">
                                <span>{{detailsInfo.leaseTotalArea+'㎡'}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
        <el-card class="card-box m-t20" shadow="never">
            <div class="head">
                <h2>费用信息</h2>
            </div>
            <div class="info-box">
                <el-form>
                    <el-row>
                        <el-col  :span="6">
                            <el-form-item class="form-item-margin_bottom" label="保证金:">
                                <span>{{detailsInfo.deposit}}{{['','待缴','已缴','待退','已退','待补'][detailsInfo.depositStatus] || ''}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="合同金额:">
                                <span>{{detailsInfo.contractTotalPrice}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2"></el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item-margin_bottom" label="已收总金额:">
                                <span>{{detailsInfo.paidContractTotalPrice}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
        <div class="user-box d-flex a-center j-start m-t20 m-l20">
            <div class="d-flex a-center">
                <span style="font-weight: 800;">租赁合同经办人:</span>
                <span>{{detailsInfo.userName}}</span>
                <span class="d-block m-l10">{{detailsInfo.departmentName}}</span>
            </div>
        </div>
        <el-divider />
        <CommonTitle titleName="补充协议信息" class="m-t20"></CommonTitle>
        <div class="info-box">
            <el-form >
                <el-form-item class="form-item-font" label="租赁周期:">
                    <div class="d-flex a-center">
                        <el-date-picker
                                :disabled="disabled"
                                v-model="param.value"
                                value-format="YYYY-MM-DD"
                                type="daterange"
                                size="large"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                @change="datePickerChange"
                        />
                        <el-button @click="disabled = false" link>修改租赁时间</el-button>
                    </div>
                </el-form-item>
                <el-form-item class="form-item-font" label="选择期数并输入减免金额:">
                    <div class="d-flex a-center">
                        <el-input v-model="money" type="number" placeholder="请输入减免金额"></el-input>
                        <el-button
                                style="padding: 0 20px;"
                                class="button_view m-l10 m-r10"
                                @click="saveHandle"
                        >保存</el-button>
                        <el-button
                                class="button_delete"
                                @click="cancelHandle"
                        >取消减免</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                radio
                :index="false"
                :isPaging="false"
                :page="page"
                border
                :tableData="tableData"
                :tableOption.sync="tableOption"
                :rowStyles="rowStyles"
                @selectClick="selectClick"
        >
        </public-table>
        <div class="user-box d-flex a-center j-start m-t20 m-l20">
            <div class="d-flex a-center">
                <span style="font-weight: 800;">补充协议经办人:</span>
                <span>{{detailsInfo.userName}}</span>
                <span class="d-block m-l10">{{detailsInfo.departmentName}}</span>
            </div>
        </div>
        <el-divider />
        <CommonTitle titleName="附件" class="m-t20"></CommonTitle>
        <div class="upload-box m-t20">
            <div class="d-flex a-center">
                <span style="font-weight: 800"><span class="star">*</span>上传附件</span>
                <el-upload
                        ref="upload"
                        class="upload-demo m-l10"
                        :limit="1"
                        :http-request="uploadFile"
                        @on-remove="onRemove"
                >
                    <template #trigger>
                        <el-button class="button_view">选择文件</el-button>
                    </template>
                </el-upload>
            </div>
        </div>
        <div class="button-wrap d-flex a-center j-center m-t30">
            <el-button @click="onCancel" class="button_cancel2">取消</el-button>
            <el-button @click="onSubmit" class="button_view" style="padding: 0 20px">提交审核</el-button>
        </div>
    </div>
</template>

<script setup>
import {supplementaryAgreementApi} from "@/api/assets";
import {ref, onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable";
import {ElCard,ElForm,ElFormItem,ElRow,ElCol,ElMessage,ElInput,ElDatePicker,ElUpload,ElDivider} from "element-plus";
import {otherApi} from "@/api/lease";


const router = useRouter();
const contractId = router.currentRoute.value.params.contractId;
const detailsInfo = ref({});
const disabled = ref(true);

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);
const tableOption = ref([
    { label: '期数', prop: 'numberOfPeriods', align: 'center', minWidth: 80 },
    {
        label: '期间 ', prop: '', overHidden: false, align: 'center', formatter: (val, row) => {
            return row.payStartTime + '-' + row.payEndTime;
        }, minWidth: 120
    },
    { label: '租赁面积  ', prop: 'leaseTotalArea', overHidden: false, align: 'center', minWidth: 100 },
    { label: '递增 ', prop: 'increaseRatio', overHidden: false, align: 'center', minWidth: 100 },
    { label: '租金单价 ', prop: 'rentUnitPrice', overHidden: false, align: 'center', minWidth: 100 },
    { label: '', prop: 'receivableRent', overHidden: false, align: 'center', minWidth: 100 },
    {
        label: '状态 ', prop: 'payStatus', overHidden: false, align: 'center', formatter: (val, row) => {
            if (val == 1) {
                return '已收';
            }
            if (val == 2) {
                return '政策免收';
            }
            if (val == -1) {
                return '已支付';
            }
            if (val == -2) {
                return '未支付';
            }
            return '-';
        }, minWidth: 100
    },
    { label: '减免金额', prop: 'money', overHidden: false, align: 'center', minWidth: 100 },
]);

const param = reactive({
    value:'',
    contractId:contractId,// 期数
    signStartTime:'',
    signEndTime:'',
    list:[],
    url:'', // 附件
    fileName:'' // 文件名
});

const state = reactive({
    signStartTime:'',
    signEndTime:'',
});

const rowStyles = ({row,rowIndex}) => {
    if(row.isShow===true){
        return 'background:red';
    }
}

// 查询补充协议详情
const getAlertInfo = () => {
    supplementaryAgreementApi.getInfo({
        contractId:contractId,
    }).then(res=>{
        detailsInfo.value = res.data;
        if(res.data.list && res.data.list.length!==0){
            res.data.list.forEach(item=>{
                item.isShow = false;
                item.money = '';
            });
            tableData.value = res.data.list;
        }
        tableOption.value[tableOption.value.length-3].label = ['','月','季','半年','年'][detailsInfo.value.payType]+'租金';
        param.signStartTime = detailsInfo.value.signStartTime;
        param.signEndTime = detailsInfo.value.signEndTime;
        state.signStartTime = detailsInfo.value.signStartTime;
        state.signEndTime = detailsInfo.value.signEndTime;
        param.value = [detailsInfo.value.signStartTime,detailsInfo.value.signEndTime];
    });
}

const row = ref(null);
const money = ref('');

// 单选中后的数据
const selectClick = (data) => {
    row.value = data;
}

const publicTableRef = ref(null);

// 保存
const saveHandle = () => {
    if(!row.value){
        return  ElMessage.error('请选中需要操作的行!');
    }
    if(money.value===''){
        return ElMessage.error('请输入减免金额');
    }
    param.list.push({
        payPlanId:row.value.payPlanId, // 流水号
        numberOfPeriods:row.value.numberOfPeriods,// 期号
        deductionAmount:money.value // 减免金额
    });
    let i = tableData.value.findIndex(x=>x.numberOfPeriods===row.value.numberOfPeriods);
    if(i!==-1){
        tableData.value[i].isShow = true;
        tableData.value[i].money = money.value;
    }
    publicTableRef.value.clearSelection();
    row.value = null;
    money.value = '';
}

// 取消减免
const cancelHandle = () => {
    if(!row.value){
        return  ElMessage.error('请选中需要操作的行!');
    }
    let i = tableData.value.findIndex(x=>x.numberOfPeriods===row.value.numberOfPeriods);
    if((i!==-1) && (tableData.value[i].isShow===false)){
        return  ElMessage.error('当前行数据未减免,不可操作!');
    }
    if(i!==-1){
        tableData.value[i].isShow = false;
        tableData.value[i].money = '';
    }
    publicTableRef.value.clearSelection();
    row.value = null;
    money.value = '';
}

// el-upload 选择文件后
const uploadFile = (file) => {
    console.log('file',file)
    let uploadFile = new FormData();
    uploadFile.append("file",file.file)
    otherApi.uploadFile(uploadFile).then(res=>{
        if(res.code==200){
            ElMessage.success('上传成功!');
            param.url = res.data;
            param.fileName = file.file.name;
        }
    });
}

/**
 * 移除文件
 */
const onRemove = () => {
    param.urlKey = '';
    param.fileName = '';
}

// 时间选择器
const datePickerChange = (val) => {
    if(val){
        param.signStartTime = val[0];
        param.signEndTime = val[1];
    }
    if(!val){
        param.signStartTime = '';
        param.signEndTime = '';
    }
}

// 提交审核
const onSubmit = () => {
   /* if(param.signStartTime===''){
        return  ElMessage.error('租赁周期不能为空!');
    }
    if(param.list.length===0){
        return  ElMessage.error('请选择需要操作的减免金额列!');
    }
    if(param.url===''){
        return  ElMessage.error('附件不能为空!');
    }*/

    if(param.signStartTime==='' && param.list.length===0) {
        if (param.signStartTime === '') {
            return ElMessage.error('租赁周期不能为空!');
        }
        if (param.list.length === 0) {
            return ElMessage.error('请选择需要操作的减免金额列!');
        }
    }
    if (param.list.length===0 && param.signStartTime === state.signStartTime && param.signEndTime === state.signEndTime) {
        return ElMessage.error('请选择需要操作的减免金额列或者修改租赁周期!');
    }
    if (param.url === '') {
        return ElMessage.error('附件不能为空!');
    }
    supplementaryAgreementApi.submit(param).then(res=>{
        if(res.code === '200'){
            router.push({path:'/asset/collaborativeApproval/viewHistory'});
        }
    });
}

// 取消
const onCancel = () => {
    router.push({path:'/asset/collaborativeApproval/viewHistory'});
}

onMounted(()=>{
    getAlertInfo();
});
</script>

<style lang="scss" scoped>
.star{
  color: red;
  margin-right: 5px;
}
.supplementaryAgreementPage{
  .form-item-margin_bottom{
    margin-bottom: 0!important;
  }
  .form-item-font{
    :deep(.el-form-item__label){
      font-weight: 800 !important;
    }
  }
  .card-box{
    width: 90%;
  }
  // .button-wrap{}
}
</style>
